import React from 'react';
import AppLayout from '../layout/AppLayout';
import { getChipsWithPrimary } from '../utils/chipConfig';
import './form.css';
import './scaffold.css';

export default function SimulationConfigRecord() {
  const chips = getChipsWithPrimary('配置', '/simulation-config-record');

  return (
    <AppLayout active="文件" chips={chips}>
      <div style={{ marginBottom: 24 }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>☰</span>
            <span>通用</span>
          </button>
          <button className="config-subtab active">
            <span style={{ fontSize: 20 }}>📄</span>
            <span>记录</span>
          </button>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>💾</span>
            <span>保存配置</span>
          </button>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>🕸️</span>
            <span>网络属性</span>
          </button>
        </div>
      </div>

      <div className="form-2col">
        <div className="card">
          <div className="field">
            <label>添加要记录轨迹的新细胞</label>
            <div className="row">
              <div className="input" style={{ flex: 1, color: '#9ca3af' }}>不是有效值</div>
              <button className="btn-circle">＋</button>
            </div>
          </div>
          <div className="field">
            <label>添加要从细胞记录的新轨迹</label>
            <div className="row">
              <div className="input" style={{ flex: 1, color: '#256a60' }}>{`{'y_soma':{'sec':'soma','loc':0.5,' var':'v'},'ik_soma':{'sec':'soma', 'loc':0.5, 'var':'ik'}`}</div>
              <button className="btn-circle">＋</button>
            </div>
          </div>
          <div className="field">
            <label>添加新的局部场电位(LFP)电极记录位置</label>
            <div className="row">
              <div className="chip-list">
                <span className="chip-soft">[-15,166,100] <span style={{ cursor: 'pointer', marginLeft: 8 }}>✕</span></span>
                <span className="chip-soft">[-15,332,100] <span style={{ cursor: 'pointer', marginLeft: 8 }}>✕</span></span>
                <span className="chip-soft">[-15,498,100] <span style={{ cursor: 'pointer', marginLeft: 8 }}>✕</span></span>
              </div>
              <button className="btn-circle">＋</button>
            </div>
          </div>
          <div className="field">
            <label>数据记录的时间步长（毫秒）</label>
            <div className="input">1</div>
          </div>
        </div>

        <div className="card">
          <div className="switch-list">
            <div className="switch-item"><span className="switch on" /> 存储单个细胞的局部场电位</div>
            <div className="switch-item"><span className="switch on" /> 存储每个种群单独生成的局部场电位</div>
            <div className="switch-item"><span className="switch on" /> 使用 Ifpykit 方法记录偶极子</div>
            <div className="switch-item"><span className="switch on" /> 使用 HNN 方法记录偶极子</div>
            <div className="switch-item"><span className="switch off" /> 记录人工刺激器 (NetStims 和 VecStims)的尖峰</div>
            <div className="switch-item"><span className="switch off" /> 存储单个细胞的偶极子细胞</div>
            <div className="switch-item"><span className="switch off" /> 存储单个细胞的偶极子种群</div>
          </div>
        </div>
      </div>
    </AppLayout>
  )
}

